/*
 Licensed to Cloudera, Inc. under one
 or more contributor license agreements.  See the NOTICE file
 distributed with this work for additional information
 regarding copyright ownership.  Cloudera, Inc. licenses this file
 to you under the Apache License, Version 2.0 (the
 "License"); you may not use this file except in compliance
 with the License.  You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

/*********************************************************
 * From: http://datatables.net/blog/Twitter_Bootstrap
 */

div.dataTables_length label {
  width: 460px;
  float: left;
  text-align: left;
}

div.dataTables_length select {
  width: 75px;
}

div.dataTables_filter label {
  float: right;
  width: 460px;
}

div.dataTables_info {
  padding-top: 8px;
}

div.dataTables_paginate {
  float: right;
  margin: 0;
}

/*
 *********************************************************/

/* Pagination nested */
.paginate_disabled_previous,
.paginate_enabled_previous,
.paginate_disabled_next,
.paginate_enabled_next {
  height: 19px;
  width: 19px;
  margin-left: 3px;
  float: left;
}

.paginate_disabled_previous {
  background-image: url('../art/datatables/back_disabled.jpg');
}

.paginate_enabled_previous {
  background-image: url('../art/datatables/back_enabled.jpg');
}

.paginate_disabled_next {
  background-image: url('../art/datatables/forward_disabled.jpg');
}

.paginate_enabled_next {
  background-image: url('../art/datatables/forward_enabled.jpg');
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables display
 */
table.display {
  margin: 0 auto;
  clear: both;
  width: 100%;

  /* Note Firefox 3.5 and before have a bug with border-collapse
    * ( https://bugzilla.mozilla.org/show%5Fbug.cgi?id=155955 )
    * border-spacing: 0; is one possible option. Conditional-css.com is
    * useful for this kind of thing
    *
    * Further note IE 6/7 has problems when calculating widths with border width.
    * It subtracts one px relative to the other browsers from the first column, and
    * adds one to the end...
    *
    * If you want that effect I'd suggest setting a border-top/left on th/td's and
    * then filling in the gaps with other borders.
    */
}

table.display thead th {
  padding: 3px 18px 3px 10px;
  border-bottom: 1px solid black;
  font-weight: bold;
  cursor: pointer;
  *cursor: hand;
}

table.display tfoot th {
  padding: 3px 18px 3px 10px;
  border-top: 1px solid black;
  font-weight: bold;
}

table.display tr.heading2 td {
  border-bottom: 1px solid @cui-gray-500;
}

table.display td {
  padding: 3px 10px;
}

table.display td.center {
  text-align: center;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables sorting
 */

.dataTables_wrapper table {
  border-collapse: separate;
  *border-collapse: collapsed;
}

.sorting,
.sorting_disabled {
  border-bottom: 1px solid transparent !important;
  padding-right: 20px !important;
  vertical-align: middle !important;
}

.sorting:hover {
  cursor: pointer;
  background: url('../art/datatables/sort_both.png') no-repeat center right;
}

.sorting_asc {
  cursor: pointer;
  background: url('../art/datatables/sort_asc.png') no-repeat center right;
  border-bottom: 1px solid @cui-blue-500 !important;
  padding-right: 20px !important;
  vertical-align: middle !important;
}

.sorting_asc:hover {
  background: url('../art/datatables/sort_asc.png') no-repeat center right;
}

.sorting_desc {
  cursor: pointer;
  background: url('../art/datatables/sort_desc.png') no-repeat center right;
  border-bottom: 1px solid @cui-blue-500 !important;
  padding-right: 20px !important;
  vertical-align: middle !important;
}

.sorting_desc:hover {
  background: url('../art/datatables/sort_desc.png') no-repeat center right;
}

.table-huedatatable,
.dataTables_wrapper table {
  margin-bottom: 0 !important;

  thead {
    th {
      color: @cui-gray-700 !important;
      background-color: @cui-white;
    }
  }

  border: none;
  border-collapse: separate;

  tbody tr:nth-child(odd) {
    background-color: @cui-gray-050;
  }
}

.table-huedatatable td.stripe {
  background: url('../art/stripedbackground.png');
}

.sorting_disabled {
  vertical-align: middle !important;
}

.sorting:hover,
.sorting_asc:hover,
.sorting_desc:hover {
  border-bottom: 1px solid @cui-blue-500 !important;
}

.table-huedatatable th.sorting:hover {
  border-top: none;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Misc
 */
.dataTables_scroll {
  clear: both;
}

.dataTables_scrollBody {
  *margin-top: -1px;
}

.top .dataTables_info {
  float: none;
}

.clear {
  clear: both;
}

.dataTables_empty {
  text-align: center;
}

tfoot input {
  margin: 0.5em 0;
  width: 100%;
  color: @cui-gray-800;
}

tfoot input.search_init {
  color: @cui-gray-600;
}

td.group {
  background-color: @cui-purple-gray-100;
  border-bottom: 2px solid @cui-purple-gray-300;
  border-top: 2px solid @cui-purple-gray-300;
}

td.details {
  background-color: @cui-purple-gray-100;
  border: 2px solid @cui-purple-gray-300;
}

.example_alt_pagination div.dataTables_info {
  width: 40%;
}

.paging_full_numbers {
  width: 400px;
  height: 22px;
  line-height: 22px;
}

.paging_full_numbers span.paginate_button,
.paging_full_numbers span.paginate_active {
  border: 1px solid @cui-gray-500;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  padding: 2px 5px;
  margin: 0 3px;
  cursor: pointer;
  *cursor: hand;
}

.paging_full_numbers span.paginate_button {
  background-color: @cui-gray-300;
}

.paging_full_numbers span.paginate_button:hover {
  background-color: @cui-gray-400;
}

.paging_full_numbers span.paginate_active {
  background-color: @cui-blue-300;
}

table.display tr.even.row_selected td {
  background-color: @cui-blue-gray-200;
}

table.display tr.odd.row_selected td {
  background-color: @cui-blue-gray-300;
}

tr.odd.gradeA td.sorting_1 {
  background-color: @cui-lime-100;
}

tr.odd.gradeA td.sorting_2 {
  background-color: @cui-lime-100;
}

tr.odd.gradeA td.sorting_3 {
  background-color: @cui-lime-100;
}

tr.even.gradeA td.sorting_1 {
  background-color: @cui-lime-100;
}

tr.even.gradeA td.sorting_2 {
  background-color: @cui-lime-050;
}

tr.even.gradeA td.sorting_3 {
  background-color: @cui-lime-050;
}

tr.odd.gradeC td.sorting_1 {
  background-color: @cui-purple-100;
}

tr.odd.gradeC td.sorting_2 {
  background-color: @cui-purple-100;
}

tr.odd.gradeC td.sorting_3 {
  background-color: @cui-purple-100;
}

tr.even.gradeC td.sorting_1 {
  background-color: @cui-purple-100;
}

tr.even.gradeC td.sorting_2 {
  background-color: @cui-purple-050;
}

tr.even.gradeC td.sorting_3 {
  background-color: @cui-purple-050;
}

tr.odd.gradeX td.sorting_1 {
  background-color: @cui-red-100;
}

tr.odd.gradeX td.sorting_2 {
  background-color: @cui-red-100;
}

tr.odd.gradeX td.sorting_3 {
  background-color: @cui-red-100;
}

tr.even.gradeX td.sorting_1 {
  background-color: @cui-red-100;
}

tr.even.gradeX td.sorting_2 {
  background-color: @cui-red-050;
}

tr.even.gradeX td.sorting_3 {
  background-color: @cui-red-050;
}

tr.odd.gradeU td.sorting_1 {
  background-color: @cui-gray-400;
}

tr.odd.gradeU td.sorting_2 {
  background-color: @cui-gray-400;
}

tr.odd.gradeU td.sorting_3 {
  background-color: @cui-gray-400;
}

tr.even.gradeU td.sorting_1 {
  background-color: @cui-gray-300;
}

tr.even.gradeU td.sorting_2 {
  background-color: @cui-gray-200;
}

tr.even.gradeU td.sorting_3 {
  background-color: @cui-gray-200;
}

/*
 * Row highlighting example
 */
.ex_highlight #example tbody tr.even:hover,
#example tbody tr.even td.highlighted {
  background-color: @cui-yellow-200;
}

.ex_highlight #example tbody tr.odd:hover,
#example tbody tr.odd td.highlighted {
  background-color: @cui-yellow-200;
}

.ex_highlight_row #example tr.even:hover {
  background-color: @cui-yellow-200;
}

.ex_highlight_row #example tr.even:hover td.sorting_1 {
  background-color: @cui-yellow-200;
}

.ex_highlight_row #example tr.even:hover td.sorting_2 {
  background-color: @cui-yellow-200;
}

.ex_highlight_row #example tr.even:hover td.sorting_3 {
  background-color: @cui-yellow-200;
}

.ex_highlight_row #example tr.odd:hover {
  background-color: @cui-yellow-200;
}

.ex_highlight_row #example tr.odd:hover td.sorting_1 {
  background-color: @cui-yellow-300;
}

.ex_highlight_row #example tr.odd:hover td.sorting_2 {
  background-color: @cui-yellow-200;
}

.ex_highlight_row #example tr.odd:hover td.sorting_3 {
  background-color: @cui-yellow-200;
}

/*
 * KeyTable
 */
table.KeyTable td {
  border: 3px solid transparent;
}

table.KeyTable td.focus {
  border: 3px solid @cui-blue-gray-500;
}

table.display tr.gradeA {
  background-color: @cui-lime-050;
}

table.display tr.gradeC {
  background-color: @cui-purple-100;
}

table.display tr.gradeX {
  background-color: @cui-red-050;
}

table.display tr.gradeU {
  background-color: @cui-gray-300;
}

div.box {
  height: 100px;
  padding: 10px;
  overflow: auto;
  border: 1px solid @cui-blue-gray-400;
  background-color: @cui-purple-050;
}

.table tbody tr:hover td,
.table tbody tr:hover th {
  background-color: @cui-gray-050;
}

.table tr.selected,
.table tr.selected td {
  background-color: @cui-blue-050 !important;
}

.table tr.locked,
.table tr.locked td {
  background-color: @cui-yellow-100 !important;
}

.table tr.locked td.unlockable,
.table tr td.lockable {
  position: relative;
}

.table tr.locked td.unlockable .fa,
.table tr td.lockable .fa {
  display: none;
  position: absolute;
  margin-top: 6px;
}

.table tr td.lockable .fa-lock {
  right: 12px;
}

.table tr.locked td.unlockable .fa-unlock {
  right: 8px;
}

.table tr td.lockable .fa-expand {
  right: 28px;
}

.table tr.locked td.unlockable:hover,
.table tr td.lockable:hover {
  color: transparent;
}

.table tr.locked td.unlockable:hover .fa,
.table tr td.lockable:hover .fa {
  color: @cui-gray-800;
  display: block;
}

.fixed-first-col-hover {
  background-color: @cui-gray-050 !important;
  border-left: 2px solid @cui-gray-300 !important;
  padding-left: 14px !important;
}

/*
 * jHueTableExtender
 */

.rowSelected {
  background-color: @cui-gray-100 !important;
}

.columnSelected {
  background-color: @cui-yellow-100 !important;
}

.cellSelected {
  background-color: @cui-gray-300 !important;
}

.jHueTableExtenderClonedContainerColumn {
  border-right: 1px solid @cui-gray-100;
}

#jHueTableExtenderNavigator {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
  display: none;
  min-width: 160px;
  padding: 10px 20px 2px 10px;
  margin: 2px 0 0;
  background-color: @cui-white;
  border: 1px solid @cui-gray-400;
  border-radius: 6px;
  .hue-box-shadow-bottom;

  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  white-space: nowrap;

  a {
    margin-left: 10px;
    margin-right: -14px;
    margin-top: -12px;
  }
}

.table-nowrap td,
.table-nowrap th {
  white-space: nowrap;
}
